import React, { Component } from 'react'
import ComCChild from './ComCChild'

export default class ComC extends Component {
  constructor() {
    // 也可以调用组件中的函数
    console.log('1.constructor-初始化数据等');
    super();
    this.state = {
      age: 18,
      isShow: true
    }
    this.sayHi()
  }
  // 组件内的普通函数
  sayHi() {
    console.log('hi~');
  }
  changeAge() {
    this.setState({
      age: this.state.age + 1,
      isShow: !this.state.isShow
    })
  }
  // 加上static这个关键字，否则会被忽略
  static getDerivedStateFromProps(props, state) {
    console.log(props, state);
    // 作用是修改state，需要返回修改的结果(对象)，如果返回null说明不修改
    return {
      age: 66
    }
  }
  componentDidMount() {
    // 通常在这里发异步请求
    console.log('组件已经渲染完整');
  }
  shouldComponentUpdate(newProps, newState) {
    // 这个函数的目的是性能优化，有些时候数据的更新不应该引起页面的重新渲染
    console.log('新数据', newState);
    console.log('老数据',this.state);
    console.log('判断数据变化时组件是否要更新');
    return true
  }
  // 不常用
  // getSnapshotBeforeUpdate(preProps, preState) {
  //   // 更新前记录对当前的数据状态
  //   console.log(preProps, preState);
  //   return {msg: 'Snapshot'}
  // }
  componentDidUpdate(preProps, preState, snapshot) {{
    // snapshot是getSnapshotBeforeUpdate返回的数据
    // 组件已经更新
    console.log(preProps, preState);
    console.log(snapshot);
  }}
  // 渲染页面，可以在初始化阶段和更新阶段反复执行，作用就是根据数据更新页面
  render() {
    console.log('render', this.state);
    return (
      <div>

        {/* 生命周期一共分成三个阶段：初始化、更新期、销毁期 */}
        <p>生命周期示例-父组件</p>
        {
          this.state.isShow ? <ComCChild age={this.state.age}></ComCChild> : null
        }
        <button onClick={()=>this.changeAge()}>age + 1</button>
      </div>
    )
  }
}
